import ReactDOM from 'react-dom/client'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
import { Indexea } from './openapi'
import config from '../config.json'
import en from './locales/en.json'
import cn from './locales/zh-CN.json'
import Index from './components/index'
import Error from './components/error'

const indexea = new Indexea(config.api, '', config.widget)
const appDom = document.querySelector('#IndexeaApp')!

indexea
  .widget()
  .then(widget => {
    // 多语言
    const locale = /zh-CN/i.test(window.navigator.language) ? 'cn' : 'en'
    const messages = { cn, en } as Record<string, any>
    const i18n = (messages[locale] as Record<string, string>) || {}

    // 设置站点属性
    document.title = widget.name || i18n.appname
    document
      .querySelector('meta[name=description]')
      ?.setAttribute('content', widget.intro || i18n.description)

    // 创建应用，同时指定模版和数据属性
    const app = <Index indexea={indexea} widget={widget} />
    ReactDOM.createRoot(appDom).render(app)
  })
  .catch(e => {
    const err = <Error msg={e.message} />
    ReactDOM.createRoot(appDom).render(err)
  })
